<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<input type="file" id="inputimg" />
		<select id="myselect">
			<option value="1">jpeg格式</option>
			<option value="2">webp格式</option>
			<option value="3">png格式</option>
		</select>
		<button id="start">开始转换</button>
		<p>预览：</p>
		<img id="imgShow" src="" alt="" />
	</body>

	<script>
		/*事件*/
		document.getElementById("start").addEventListener("click", function () {
			getImg(function (image) {
				let can = imgToCanvas(image);
				imgshow = document.getElementById("imgShow");
				imgshow.setAttribute("src", canvasToImg(can));
			});
		});
		// 把image 转换为 canvas对象
		function imgToCanvas(image) {
			let canvas = document.createElement("canvas");
			canvas.width = image.width;
			canvas.height = image.height;
			canvas.getContext("2d").drawImage(image, 0, 0);
			return canvas;
		}
		//canvas转换为image
		function canvasToImg(canvas) {
			let array = ["image/jpeg", "image/webp", "image/png"];
			type = document.getElementById("myselect").value - 1;
			let src = canvas.toDataURL(array[type]);
			// console.log(src);
			return src;
		}
		//获取图片信息
		function getImg(fn) {
			let imgFile = new FileReader();
			try {
				// 使用FileReader来把文件读入内存，并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统，读取文件中的数据，且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src
				imgFile.readAsDataURL(document.getElementById("inputimg").files[0]);
				imgFile.onload = function (e) {
					let image = new Image();
					image.src = e.target.result; //base64数据
					image.onload = function () {
						fn(image);
					};
				};
			} catch (e) {
				console.log("请上传图片！" + e);
			}
		}
	</script>
</html>

<!-- 
1、该工具目前仅支持转换为webp、jpeg、png的格式。如果是gif动态图片转换后不保留动态效果。
2、请使用高版本浏览器,推荐使用Chrome。
 -->
